<template>
    <div class="attendance-overview">
        <!-- 顶部卡片统计信息 -->
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-content">
                        <div class="stat-info">
                            <div class="stat-title">全校总人数</div>
                            <div class="stat-value">{{ campusAllnumber }}</div>
                            <div class="stat-time">数据统计截止时间：{{ currentTime }}</div>
                        </div>
                        <div class="stat-icon blue">
                            <el-icon>
                                <User />
                            </el-icon>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-content">
                        <div class="stat-info">
                            <div class="stat-title">全校今日平均出勤率</div>
                            <div class="stat-value">{{ campusAttendanceData.AttendanceRate || 0 }}%</div>
                            <div class="stat-time">数据统计截止时间：{{ currentTime }}</div>
                        </div>
                        <div class="stat-icon green">
                            <el-icon>
                                <Reading />
                            </el-icon>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" class="stat-card">
                    <div class="stat-content">
                        <div class="stat-info">
                            <div class="stat-title">全校今日缺勤人数</div>
                            <div class="stat-value">{{ campusAttendanceData.Absence || 0 }}</div>
                            <div class="stat-time">数据统计截止时间：{{ currentTime }}</div>
                        </div>
                        <div class="stat-icon red">
                            <el-icon>
                                <Warning />
                            </el-icon>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 中间图表区域 -->
        <el-row :gutter="20" class="chart-row">
            <el-col :span="16">
                <el-card shadow="hover" class="chart-card">
                    <div class="card-header">
                        <div class="title">
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            全校出勤率统计
                        </div>
                        <div class="tabs">
                            <el-radio-group v-model="attendanceChartPeriod" size="small">
                                <el-radio-button value="week">本周</el-radio-button>
                                <el-radio-button value="month">本月</el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div ref="attendanceLineChart" class="chart-container"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" class="chart-card">
                    <div class="card-header">
                        <div class="title">
                            <el-icon>
                                <VideoPlay />
                            </el-icon>
                            在线考勤
                        </div>
                        <div class="more">
                            <el-button type="primary" text @click="navigateToClassOverview">查看更多 ></el-button>
                        </div>
                    </div>
                    <!-- 修改后的年级班级选择下拉框 -->
                    <div class="video-filter">
                        <el-tree-select v-model="selectedVideoDeptId" :data="enabledDeptOptions"
                            :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
                            placeholder="选择年级" check-strictly default-expand-all style="width: 240px;" />
                        <el-select v-model="selectedVideoClassId" placeholder="选择班级" clearable style="width: 240px;">
                            <el-option v-for="item in postIdList" :key="item.postId" :label="item.postName"
                                :value="item.postId" />
                        </el-select>
                    </div>
                    <div class="video-container">
                        <div class="video-placeholder">
                            <el-icon>
                                <VideoPlay />
                            </el-icon>
                        </div>
                    </div>
                    <div class="video-info">
                        <el-tag size="small" type="success" class="live-tag">
                            <el-icon>
                                <VideoCamera />
                            </el-icon>
                            正在直播
                        </el-tag>
                        <div class="class-name">{{ getSelectedClassName() }}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 底部班级和学科出勤率统计 -->
        <el-card shadow="hover" class="chart-card">
            <div class="card-header">
                <div class="title">
                    <el-icon>
                        <School />
                    </el-icon>
                    各班级出勤率统计
                </div>
                <div class="filter-container">
                    <el-tree-select v-model="selectedDeptId" :data="enabledDeptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="选择年级"
                        check-strictly default-expand-all style="width: 160px;" class="filter-item select-flex" />
                    <el-radio-group v-model="classChartPeriod" size="small" class="filter-item radio-group-inline">
                        <el-radio-button value="today">今日</el-radio-button>
                        <el-radio-button value="week">本周</el-radio-button>
                        <el-radio-button value="month">本月</el-radio-button>
                        <el-radio-button value="quarter">本季度</el-radio-button>
                        <el-radio-button value="semester">本学期</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div ref="classBarChart" class="chart-container"></div>
        </el-card>

        <!-- 学科出勤率统计 -->
        <el-card shadow="hover" class="chart-card">
            <div class="card-header">
                <div class="title">
                    <el-icon>
                        <Collection />
                    </el-icon>
                    各科出勤率统计
                </div>
                <div class="filter-container">
                    <el-tree-select v-model="selectedDeptIdForSubject" :data="enabledDeptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="选择年级"
                        check-strictly default-expand-all style="width: 160px;" class="filter-item select-flex" />
                    <el-radio-group v-model="subjectChartPeriod" size="small" class="filter-item radio-group-inline">
                        <el-radio-button value="today">今日</el-radio-button>
                        <el-radio-button value="week">本周</el-radio-button>
                        <el-radio-button value="month">本月</el-radio-button>
                        <el-radio-button value="quarter">本季度</el-radio-button>
                        <el-radio-button value="semester">本学期</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <div ref="subjectBarChart" class="chart-container"></div>
        </el-card>

        <!-- 今日缺勤学生列表 -->
        <el-card shadow="hover" class="chart-card">
            <div class="card-header">
                <div class="title">
                    <el-icon>
                        <User />
                    </el-icon>
                    今日缺勤学生
                </div>
            </div>
            <el-table :data="campusTodayAbsenceStudent" style="width: 100%">
                <el-table-column prop="studentName" label="学号" />
                <el-table-column prop="studentNick" label="学生姓名" />
                <el-table-column prop="dept.deptName" label="所在年级" />
                <el-table-column prop="post.postName" label="班级" />
                <el-table-column prop="subjectName" label="学科" />
                <el-table-column prop="courseName" label="考勤状态">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">
                            {{ getStatusText(scope.row.status) }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" link @click="viewDetails(scope.row)">
                            查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup name="StudentManageOverview">
import { ref, onMounted, onUnmounted, getCurrentInstance, computed, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import { allAttendance, getDaysAttendanceRate, getDaysAttendanceRateByType, getDaysAttendanceStatistics } from "@/api/manage/attendance";
import { allCourse, allClass } from "@/api/manage/course";
import { getDaysByOption } from "@/utils/lastDays";
import { allStudent, deptTreeSelect } from "@/api/system/user";
import * as echarts from 'echarts';
import { User, Reading, Warning, TrendCharts, VideoPlay, School, Collection, VideoCamera } from '@element-plus/icons-vue';

const router = useRouter();
const { proxy } = getCurrentInstance();
const { attendance_status } = proxy.useDict('attendance_status');

// 基础数据
const campusAllnumber = ref(0); // 学生总人数
const campusAttendanceData = ref({
    Attendance: 0,
    Absence: 0,
    AttendanceRate: 0
});

const campusAttendanceRate = ref({});
const campusTodayAbsenceStudent = ref([]);
const currentTime = ref('');

// 图表相关
const attendanceLineChart = ref(null);
const classBarChart = ref(null);
const subjectBarChart = ref(null);
const attendanceChartPeriod = ref('week');
const classChartPeriod = ref('today');
const subjectChartPeriod = ref('today');
let attendanceChart = null;
let classChart = null;
let subjectChart = null;

// 年级和班级选择
const postIdList = ref([]);
const deptOptions = ref([]);
const enabledDeptOptions = ref([]);
const selectedDeptId = ref('');
const selectedDeptIdForSubject = ref('');

// 视频区域相关 - 修改为使用下拉框选择
const selectedVideoDeptId = ref('');
const selectedVideoClassId = ref('');


// 班级查看更多的路由跳转
function navigateToClassOverview() {
    router.push({
        path: '/student_manage/student_manage_class_overview',
        query: {
            deptId: selectedVideoDeptId.value,
            classId: selectedVideoClassId.value
        }
    });
}

// 查看某条件下的近days天考勤数据统计,使用getDaysAttendanceStatistics
function getDaysConditionAttendanceData(params) {
    getDaysAttendanceStatistics(params).then(res => {
        if (res.code === 200) {
            // 处理返回的数据
            return res.data;
        } else {
            proxy.$message.error('获取考勤数据失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取考勤数据失败');
    });
}

// 根据选择的年级过滤班级列表
const filteredClassList = computed(() => {
    if (!selectedVideoDeptId.value) {
        return postIdList.value;
    }
    // 实际应用中，这里应该根据班级是否有人过滤班级列表
    return postIdList.value;
});

// 树形结构中查找指定ID的节点
function findDeptById(tree, id) {
    for (const node of tree) {
        if (node.id === id) {
            return node; // 找到目标节点，直接返回
        }
        if (node.children && node.children.length > 0) {
            const result = findDeptById(node.children, id); // 递归查找子节点
            if (result) {
                return result; // 如果在子节点中找到，返回结果
            }
        }
    }
    return null; // 如果未找到，返回 null
}

// 获取选中班级的名称
function getSelectedClassName() {
    if (!selectedVideoDeptId.value) {
        return '请选择年级';
    }
    if (!selectedVideoClassId.value) {
        return '请选择班级';
    }

    // 获得当前所选年级，enabledDeptOptions是树形结构，不能直接循环找到
    const selectedDept = findDeptById(enabledDeptOptions.value, selectedVideoDeptId.value);
    if (!selectedDept) {
        return '未知年级';
    }

    const selectedClass = postIdList.value.find(item => item.postId === selectedVideoClassId.value);

    // 将班级名称和年级名称拼接
    if (selectedDept.label && selectedClass.postName) {
        return `${selectedDept.label}${selectedClass.postName}`;
    }

    return '未知班级';
}

// 获取当前时间
const updateCurrentTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    currentTime.value = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
};

// 获取今天的日期
function getTodayDate() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
    const day = String(today.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// 班级下拉框数据，获取所有班级
function getAllClass() {
    allClass().then(response => {
        postIdList.value = response.data;
        // console.log(postIdList.value);
        // 如果有班级数据，默认选择第一个班级
        if (postIdList.value && postIdList.value.length > 0) {
            selectedVideoClassId.value = postIdList.value[0].postId;
        }
    });
}
getAllClass();


/** 查询年级下拉树结构 */
function getDeptTree() {
    deptTreeSelect().then(response => {
        deptOptions.value = response.data;
        enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)));
        // 默认选择第一个年级
        if (enabledDeptOptions.value && enabledDeptOptions.value.length > 0) {
            selectedDeptId.value = 233;
            selectedDeptIdForSubject.value = 233;
            selectedVideoDeptId.value = 233;
        }
    });
};
getDeptTree()

/** 过滤禁用的年级 */
function filterDisabledDept(deptList) {
    return deptList.filter(dept => {
        if (dept.disabled) {
            return false;
        }
        if (dept.id == 101) {
            return false;
        }
        if (dept.children && dept.children.length) {
            dept.children = filterDisabledDept(dept.children);
        }
        return true;
    });
};



// 获取所有学生数量
function getAllStudentNumber() {
    allStudent({}).then(res => {
        if (res.code === 200) {
            campusAllnumber.value = res.rows.length;
        } else {
            proxy.$message.error('获取学生总人数失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取学生总人数失败');
    });
}

// 获取今日学校的考勤数据
function getAttendanceStatus() {
    allAttendance({
        attendanceDate: getTodayDate()
    }).then(res => {
        if (res.code === 200) {
            campusAttendanceData.value = {
                Attendance: res.data.filter(item => item.status === 0).length,
                Absence: res.data.filter(item => item.status === 3).length,
                AttendanceRate: Math.floor((res.data.filter(item => item.status === 0).length / res.data.length) * 100)
            };
        } else {
            proxy.$message.error('获取考勤数据失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取考勤数据失败');
    });
}

// 获取本today、week、month、quarter、semester学校的考勤数据
function getAttendanceRateByOption(option) {
    getDaysAttendanceRate({ "days": getDaysByOption(option) }).then(res => {
        if (res.code === 200) {
            campusAttendanceRate.value = res.data;

            // 更新图表数据
            if (option === attendanceChartPeriod.value) {
                initAttendanceLineChart();
            }
        } else {
            proxy.$message.error('获取图表考勤数据失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取图表考勤数据失败');
    });
}

// 使用listAttendance获取今日缺勤学生列表
function getTodayAbsenceStudent() {
    allAttendance({
        attendanceDate: getTodayDate(),
        status: 3
    }).then(res => {
        if (res.code === 200) {
            campusTodayAbsenceStudent.value = res.data;
        } else {
            proxy.$message.error('获取缺勤学生列表失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取缺勤学生列表失败');
    });
}

function viewDetails(row) {
    router.push({
        path: '/student_manage/student_manage_person_overview',
        query: {
            studentId: row.studentId,
            deptId: row.deptId,
            postId: row.postId
        }
    });
}

// 获取班级考勤率数据
function getClassAttendanceRate() {
    if (!selectedDeptId.value) return;

    const params = {
        deptId: selectedDeptId.value,
        days: getDaysByOption(classChartPeriod.value),
        type: 'class'
    };

    getDaysAttendanceRateByType(params).then(res => {
        if (res.code === 200) {
            initClassBarChart(res.data);
        } else {
            proxy.$message.error('获取班级考勤率数据失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取班级考勤率数据失败');
    });
}

// 获取学科考勤率数据
function getSubjectAttendanceRate() {
    if (!selectedDeptIdForSubject.value) return;

    const params = {
        deptId: selectedDeptIdForSubject.value,
        days: getDaysByOption(subjectChartPeriod.value),
        type: 'subject'
    };

    getDaysAttendanceRateByType(params).then(res => {
        if (res.code === 200) {
            initSubjectBarChart(res.data);
        } else {
            proxy.$message.error('获取学科考勤率数据失败');
        }
    }).catch(err => {
        console.error(err);
        proxy.$message.error('获取学科考勤率数据失败');
    });
}

// 初始化出勤率折线图
function initAttendanceLineChart() {
    if (!attendanceLineChart.value) return;

    // 应该使用campusAttendanceRate
    const mockData = {
        dates: campusAttendanceRate.value.dateList,
        rates: campusAttendanceRate.value.ratesList
    };

    // 如果图表已经存在，销毁它
    if (attendanceChart) {
        attendanceChart.dispose();
    }

    // 创建新图表
    attendanceChart = echarts.init(attendanceLineChart.value);

    const option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + '<br/>' + params[0].marker + '出勤率: ' + params[0].value + '%';
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '16%', // 增加顶部边距，避免数据标签被遮挡
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: mockData.dates,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLine: {
                show: false
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        },
        series: [
            {
                name: '出勤率',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 8,
                itemStyle: {
                    color: '#4080ff'
                },
                lineStyle: {
                    color: '#4080ff',
                    width: 3
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(64, 128, 255, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(64, 128, 255, 0.1)'
                        }
                    ])
                },
                data: mockData.rates,
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                }
            }
        ]
    };

    attendanceChart.setOption(option);

    // 添加点击事件
    attendanceChart.on('click', function (params) {
        // 显示当天的出勤率
        proxy.$message.info(`${params.name}日出勤率: ${params.value}%`);
    });
}

// 初始化班级出勤率柱状图
function initClassBarChart(data) {
    if (!classBarChart.value) return;

    if (!data) return;

    // 使用API返回的数据
    const mockData = {
        classes: data.nameList,
        rates: data.rateList
    };

    // 如果图表已经存在，销毁它
    if (classChart) {
        classChart.dispose();
    }

    // 创建新图表
    classChart = echarts.init(classBarChart.value);

    const option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + '<br/>' + params[0].marker + '出勤率: ' + params[0].value + '%';
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '16%', // 增加顶部边距，避免数据标签被遮挡
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: mockData.classes,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLine: {
                show: false
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        },
        series: [
            {
                name: '出勤率',
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    color: '#4080ff'
                },
                data: mockData.rates
            }
        ]
    };

    classChart.setOption(option);

    // 添加点击事件
    classChart.on('click', function (params) {
        // 显示当前班级的出勤率
        proxy.$message.info(`${params.name}出勤率: ${params.value}%`);
    });
}

// 初始化学科出勤率柱状图
function initSubjectBarChart(data) {
    if (!subjectBarChart.value) return;

    if (!data) return;

    // 使用API返回的数据
    const mockData = {
        subjects: data.nameList,
        rates: data.rateList
    };

    // 如果图表已经存在，销毁它
    if (subjectChart) {
        subjectChart.dispose();
    }

    // 创建新图表
    subjectChart = echarts.init(subjectBarChart.value);

    const option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + '<br/>' + params[0].marker + '出勤率: ' + params[0].value + '%';
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '16%', // 增加顶部边距，避免数据标签被遮挡
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: mockData.subjects,
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: 100,
            axisLine: {
                show: false
            },
            axisLabel: {
                color: '#666',
                formatter: '{value}%'
            },
            splitLine: {
                lineStyle: {
                    color: '#eee'
                }
            }
        },
        series: [
            {
                name: '出勤率',
                type: 'bar',
                barWidth: '40%',
                itemStyle: {
                    color: '#4080ff'
                },
                data: mockData.rates
            }
        ]
    };

    subjectChart.setOption(option);

    // 添加点击事件
    subjectChart.on('click', function (params) {
        // 显示当前学科的出勤率
        proxy.$message.info(`${params.name}出勤率: ${params.value}%`);
    });
}

// 获取考勤状态文本
function getStatusText(status) {
    const statusObj = attendance_status.value.find(item => parseInt(item.value) === parseInt(status));
    return statusObj ? statusObj.label : '未知';
}

// 获取考勤状态标签类型
function getStatusType(status) {
    const typeMap = {
        0: 'success',
        1: 'warning',
        2: 'warning',
        3: 'danger',
        4: 'info'
    };
    return typeMap[status] || '';
}

// 监听图表周期变化
watch(attendanceChartPeriod, (newVal) => {
    getAttendanceRateByOption(newVal);
});

watch(classChartPeriod, (newVal) => {
    getClassAttendanceRate();
});

watch(subjectChartPeriod, (newVal) => {
    getSubjectAttendanceRate();
});

watch(selectedDeptId, (newVal) => {
    if (newVal) {
        getClassAttendanceRate();
    }
});

watch(selectedDeptIdForSubject, (newVal) => {
    if (newVal) {
        getSubjectAttendanceRate();
    }
});

// 监听视频区域年级变化
watch(selectedVideoDeptId, (newVal) => {
    // 当年级变化时，重置班级选择
    selectedVideoClassId.value = filteredClassList.value.length > 0 ? filteredClassList.value[0].postId : '';
});

// 页面加载时执行
onMounted(() => {
    // 更新当前时间
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);

    // 获取基础数据
    getAllClass();
    getDeptTree();
    getAllStudentNumber();
    getAttendanceStatus();
    getAttendanceRateByOption('week');
    getAttendanceRateByOption('month');
    getTodayAbsenceStudent();

    // 初始化图表
    nextTick(() => {
        initAttendanceLineChart();
        initClassBarChart();
        initSubjectBarChart();

        // 监听窗口大小变化，重绘图表
        window.addEventListener('resize', () => {
            // 重新绘制图表前，确保图表实例存在
            if (attendanceChart) {
                attendanceChart.resize();
            }
            if (classChart) {
                classChart.resize();
            }
            if (subjectChart) {
                subjectChart.resize();
            }
        });
    });
});

// 组件卸载时清理
onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', () => { });

    // 销毁图表实例
    // 这里需要确保在组件卸载时销毁图表实例
    if (attendanceChart) {
        attendanceChart.dispose();
    }
    if (classChart) {
        classChart.dispose();
    }
    if (subjectChart) {
        subjectChart.dispose();
    }
});
</script>

<style scoped>
.select-flex {
    flex: 1;
    /* 让下拉框占据剩余空间 */
    min-width: 150px;
    /* 设置最小宽度，避免过小 */
}

.radio-group-inline {
    display: flex;
    flex-wrap: nowrap;
}

.attendance-overview {
    padding: 20px;
}

/* 卡片样式 */
.stat-card {
    margin-bottom: 20px;
    border-radius: 8px;
}

.stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-info {
    flex: 1;
}

.stat-title {
    font-size: 14px;
    color: #606266;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 10px;
}

.stat-time {
    font-size: 12px;
    color: #909399;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.stat-icon.blue {
    background-color: #409eff;
}

.stat-icon.green {
    background-color: #67c23a;
}

.stat-icon.red {
    background-color: #f56c6c;
}

/* 图表卡片样式 */
.chart-card {
    margin-bottom: 20px;
    border-radius: 8px;
}

.chart-row {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-header .title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
    display: flex;
    align-items: center;
}

.card-header .title .el-icon {
    margin-right: 5px;
}

.filter-container {
    display: flex;
    align-items: center;
}

.filter-item {
    height: 32px;
    margin-left: 10px;
}

.chart-container {
    height: 300px;
    width: 100%;
}

/* 视频区域样式 */
.video-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.video-filter-item {
    flex: 1;
}

.video-container {
    height: 200px;
    background-color: #000;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.video-placeholder {
    color: #fff;
    font-size: 48px;
}

.video-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.live-tag {
    display: flex;
    align-items: center;
    gap: 5px;
}

.class-name {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
}
</style>